
		<link rel="stylesheet" href="/static/cstore/bootstrap/css/bootstrap.min.css" />
	    <link rel="stylesheet" type="text/css" href="/static/cstore/css/dataTables.bootstrap.css">
		<link rel="stylesheet" href="/static/cstore/css/select2.css" />
 		<!--<link rel="stylesheet" href="/static/cstore/css/matrix-style.css" />-->

		<script type="text/javascript" language="javascript" src="/static/cstore/datatable/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" language="javascript" src="/static/cstore/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="/static/cstore/js/dataTables.bootstrap.js"></script>
	
		<script type="text/javascript">
	
		var oTable;
		$(document).ready(function() {
		       oTable=initTable();
		    });
		    function initTable() {
		         var actionUrl='/role/list';
		       var table = $('#example').dataTable({
		            "bFilter": false, 
		            "bAutoWidth": false,  
		            "sPaginationType" : 'full_numbers',
		            "bPaginate": true, //翻页功能
		            "bDestroy" : true,
		            "bProcessing" : true,
		            "sAjaxSource" : actionUrl,
		            "iDisplayLength":10,
		            "aLengthMenu": [[10, 15,20, 50, -1], [10, 15, 20,50, "All"]],
		            "bServerSide" : true,
		            "bSort":true,
		            "aoColumns" : [ 
		            	  {
			                "mDataProp": "Id",
			                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
			                    $(nTd).html("<input type='checkbox' align='center' name='checkList' value='" + sData + "'>"); }
					      },
		            	 {"mDataProp" : "Name",},
		                 {"mDataProp" : "Key",},
		                 {"mDataProp" : "Description",}, 
		                 {"mDataProp" : "Statusname",},
		                 {
			                "mDataProp": "Id",
			                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
			                    $(nTd).html("<a href='javascript:void(0);' onclick='_permission(" + sData + ")'>分配权限</a>&nbsp;&nbsp;").append("<a href='/role/edit?Id="+ oData.Id + "&Name= "+ oData.Name + "&Key=" + oData.Key + " &Description=" + oData.Description + "&Status=" + oData.Status +"'>编辑</a>&nbsp;&nbsp;")
			                        .append("<a href='javascript:void(0);' onclick='_deleteFun(" + sData + ")'>删除</a>");
			                }
            			}],
		            "oLanguage" : {
		                "sProcessing" : "正在加载中......",
		                "sLengthMenu" : "每页显示 _MENU_ 条记录",
		                "sZeroRecords" : "没有数据！",
		                "sEmptyTable" : "表中无数据存在！",
		                "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
		                "sInfoEmpty" : "显示0到0条记录",
		                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
		                "oPaginate" : {
		                    "sFirst" : "首页",
		                    "sPrevious" : "上一页",
		                    "sNext" : "下一页",
		                    "sLast" : "末页"
		                }
		            }
		        });
				return table;
		    }
	
	 /**
		 * 给角色分配权限
		 * @param id
		 * @private
		 */
		function _permission(id) {
		   var url = "/role/allocation?Id="+id;
				 var h_sp1 = 1200;
				 var w_sp1 = 350;
				 var iTop2 = (window.screen.availHeight - 20 - h_sp1) / 2;
				 var iLeft2 = (window.screen.availWidth - 10 - w_sp1) / 2;
				 var params = 'menubar:no;toolbar:no;dialogHeight:' + h_sp1 + 'px;dialogWidth:' + w_sp1 + 'px;dialogLeft:' + iLeft2 + 'px;dialogTop:' + iTop2 + 'px;resizable:yes;scrollbars:0;resizeable:0;center:yes;location:no;status:no;scroll:no';
				window.open(url, window, params)
		}
	
	    /**
		 * 删除
		 * @param id
		 * @private
		 */
		function _deleteFun(id) {
		    $.ajax({
		        url: "/role/delete",
		        data: {"Id": id},
		        type: "post",
		        success: function (r) {
		            if (r.status) {
		                oTable.fnReloadAjax(oTable.fnSettings());
		            } else {
		                alert(r.info);
		            }
		        }, error: function (error) {
		            console.log(error);
		        }
		    });
		}
			/**
			table刷新表格
			*/ 
		 	$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings) {
		    this.fnClearTable(this);
		    this.oApi._fnProcessingDisplay(oSettings, true);
		    var that = this;
		 
		    $.getJSON(oSettings.sAjaxSource, null, function (json) {
		        for (var i = 0; i < json.aaData.length; i++) {
		            that.oApi._fnAddData(oSettings, json.aaData[i]);
		        }
		        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
		        that.fnDraw(that);
		        that.oApi._fnProcessingDisplay(oSettings, false);
		    });
		}
		</script>

		<div  >
 			 <h3>角色管理 <img src="/static/cstore/img/right.png"><small>添加角色</small></h3>
	 			 <div class="cen_left_line">
	 			 <hr width=100% size=1 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=3)">
				</div>
		</div>	
		<div>
			<table class="table table-bordered data-table" cellpadding="0" cellspacing="0" border="1" class="display"
				id="example">
				<thead>
					<tr>
						<th style="width:1%" align="left"><input type="checkbox" style="left: auto; " id='checkAll' style=""></th>
						<th style="width:5%">名称</th>
						<th style="width:5%">Key</th>
						<th style="width:5%">描述</th>
						<th style="width:5%">状态</th>
						<th style="width:15%;">操作</th>
					</tr>
				</thead>
				<tbody id="data_body">
				</tbody>
				
			</table>
		</div>

